import React, { useState, useEffect } from "react";
import { Card, Tabs, List, Tag, Button, Space, Upload, Modal, message, Progress, Tooltip } from "antd";
import {
  ClockCircleOutlined,
  FileTextOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  UploadOutlined,
  DownloadOutlined,
  EyeOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  RobotOutlined,
} from "@ant-design/icons";
import styled from "styled-components";
import { studentAPI } from "../../../services/api";
import { useNavigate } from "react-router-dom";
import HomeworkDetailModal from "./components/HomeworkDetailModal";
import HomeworkSubmissionModal from "./components/HomeworkSubmissionModal";
import QuizSubmissionModal from "./components/QuizSubmissionModal";

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  .ant-card-head-title {
    font-weight: bold;
  }
`;

interface Question {
  id: string;
  question: string;
  type: "single" | "multiple" | "text";
  options?: string[];
  correctAnswer?: string | string[];
  studentAnswer?: string | string[];
  isCorrect?: boolean;
  score?: number;
  fullScore?: number;
  explanation?: string;
}

interface Homework {
  id: string;
  title: string;
  course: string;
  teacher: string;
  description: string;
  deadline: string;
  status: "未提交" | "已提交" | "已批改" | "已过期";
  type: "file" | "quiz"; // 作业类型：文件作业或选择题作业
  score?: number;
  fullScore?: number;
  submittedAt?: string;
  gradedAt?: string;
  feedback?: string;
  attachments?: string[];
  submittedFiles?: string[];
  questions?: Question[]; // 选择题作业的题目
  hasAIExplanation?: boolean; // 是否有AI解析
}

const StudentHomework: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [pendingHomework, setPendingHomework] = useState<Homework[]>([]);
  const [submittedHomework, setSubmittedHomework] = useState<Homework[]>([]);
  const [gradedHomework, setGradedHomework] = useState<Homework[]>([]);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [submissionModalVisible, setSubmissionModalVisible] = useState(false);
  const [quizSubmissionModalVisible, setQuizSubmissionModalVisible] = useState(false);
  const [selectedHomeworkId, setSelectedHomeworkId] = useState<string>("");
  const [selectedHomework, setSelectedHomework] = useState<Homework | null>(null);
  const [viewAnswerMode, setViewAnswerMode] = useState(false);

  // 获取作业列表
  const fetchHomework = async () => {
    try {
      console.log("📝 获取学生作业列表...");

      // 使用静态真实数据
      const mockPending: Homework[] = [
        {
          id: "1",
          title: "数据结构实验一：线性表实现",
          course: "数据结构与算法",
          teacher: "陈教授",
          description: "实现顺序表和链表的插入、删除、查找等基本操作，要求代码规范，注释完整。",
          deadline: "2025-08-15 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["实验要求.pdf", "参考代码.zip"]
        },
        {
          id: "2",
          title: "计算机网络实验报告",
          course: "计算机网络",
          teacher: "王教授",
          description: "完成网络抓包实验，分析HTTP协议数据包，撰写实验报告。",
          deadline: "2025-08-20 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["实验指导书.pdf", "Wireshark使用说明.pdf"]
        },
        {
          id: "3",
          title: "数据库设计作业",
          course: "数据库系统原理",
          teacher: "李教授",
          description: "设计一个图书管理系统的数据库，包含ER图、关系模式、SQL语句等。",
          deadline: "2025-08-25 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["需求文档.pdf", "设计模板.docx"]
        },
        {
          id: "16",
          title: "计算机网络基础知识测试",
          course: "计算机网络",
          teacher: "王教授",
          description: "测试对计算机网络基础知识的掌握程度，包括OSI模型、TCP/IP协议等。",
          deadline: "2025-08-18 23:59",
          status: "未提交",
          type: "quiz",
          fullScore: 100,
          attachments: ["考试说明.pdf"],
          questions: [
            {
              id: "1",
              question: "OSI参考模型有多少层？",
              type: "single",
              options: ["A. 5层", "B. 6层", "C. 7层", "D. 8层"],
              fullScore: 20
            },
            {
              id: "2",
              question: "TCP协议属于OSI模型的哪一层？",
              type: "single",
              options: ["A. 物理层", "B. 数据链路层", "C. 网络层", "D. 传输层"],
              fullScore: 20
            },
            {
              id: "3",
              question: "以下哪些是网络层协议？",
              type: "multiple",
              options: ["A. IP", "B. ICMP", "C. ARP", "D. TCP"],
              fullScore: 30
            },
            {
              id: "4",
              question: "请简述TCP和UDP的区别。",
              type: "text",
              fullScore: 30
            }
          ]
        },
        {
          id: "17",
          title: "数据结构选择题练习",
          course: "数据结构与算法",
          teacher: "陈教授",
          description: "通过选择题形式测试对数据结构基本概念和算法的理解。",
          deadline: "2025-08-22 23:59",
          status: "未提交",
          type: "quiz",
          fullScore: 100,
          attachments: ["练习说明.pdf"],
          questions: [
            {
              id: "1",
              question: "以下哪种数据结构是LIFO？",
              type: "single",
              options: ["A. 队列", "B. 栈", "C. 链表", "D. 树"],
              fullScore: 25
            },
            {
              id: "2",
              question: "快速排序的平均时间复杂度是？",
              type: "single",
              options: ["A. O(n)", "B. O(n log n)", "C. O(n²)", "D. O(log n)"],
              fullScore: 25
            },
            {
              id: "3",
              question: "以下哪些是图的遍历算法？",
              type: "multiple",
              options: ["A. 深度优先搜索", "B. 广度优先搜索", "C. 中序遍历", "D. 后序遍历"],
              fullScore: 30
            },
            {
              id: "4",
              question: "请解释什么是二叉树，并说明其特点。",
              type: "text",
              fullScore: 20
            }
          ]
        },
        {
          id: "9",
          title: "Java面向对象编程作业",
          course: "Java程序设计",
          teacher: "吴教授",
          description: "设计一个学生管理系统，要求使用面向对象编程思想，实现学生信息的增删改查功能。需要包含类设计、继承、多态等概念的应用。",
          deadline: "2025-08-18 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["项目需求.pdf", "UML设计模板.vsd", "测试用例.xlsx"]
        },
        {
          id: "10",
          title: "Web前端开发实验",
          course: "Web前端技术",
          teacher: "林教授",
          description: "使用HTML、CSS、JavaScript开发一个响应式个人博客网站。要求包含导航栏、文章列表、评论系统等功能，并适配移动端。",
          deadline: "2025-08-22 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["设计规范.pdf", "素材包.zip", "参考案例.html"]
        },
        {
          id: "11",
          title: "机器学习算法实现",
          course: "机器学习基础",
          teacher: "郑教授",
          description: "实现K-means聚类算法和决策树算法，使用Python编写，并在给定数据集上进行测试。要求包含算法原理说明、代码实现、实验结果分析。",
          deadline: "2025-08-28 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["算法原理.pdf", "数据集.csv", "实验报告模板.docx"]
        },
        {
          id: "12",
          title: "软件测试实验",
          course: "软件测试技术",
          teacher: "黄教授",
          description: "为一个简单的计算器程序编写测试用例，包括单元测试、集成测试和系统测试。使用JUnit框架，要求测试覆盖率不低于80%。",
          deadline: "2025-08-30 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["测试规范.pdf", "计算器源码.java", "JUnit使用指南.pdf"]
        },
        {
          id: "13",
          title: "计算机图形学实验",
          course: "计算机图形学",
          teacher: "马教授",
          description: "使用OpenGL实现一个3D立方体的旋转和光照效果。要求包含顶点着色器、片段着色器的编写，以及光照模型的应用。",
          deadline: "2025-09-05 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["OpenGL教程.pdf", "着色器代码模板.glsl", "3D模型文件.obj"]
        },
        {
          id: "14",
          title: "信息安全实验",
          course: "信息安全基础",
          teacher: "徐教授",
          description: "实现RSA加密算法和数字签名功能。要求包含密钥生成、加密解密、签名验证等完整流程，并分析算法的安全性。",
          deadline: "2025-09-10 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["密码学原理.pdf", "RSA算法实现指南.pdf", "测试数据.txt"]
        },
        {
          id: "15",
          title: "人工智能课程设计",
          course: "人工智能导论",
          teacher: "何教授",
          description: "设计并实现一个简单的聊天机器人，使用自然语言处理技术。要求能够理解基本问题并给出合理回答，包含对话管理功能。",
          deadline: "2025-09-15 23:59",
          status: "未提交",
          type: "file",
          fullScore: 100,
          attachments: ["NLP基础.pdf", "对话系统设计指南.pdf", "语料库.zip"]
        }
      ];

      const mockSubmitted: Homework[] = [
        {
          id: "4",
          title: "Python编程作业",
          course: "Python程序设计",
          teacher: "张教授",
          description: "实现一个简单的计算器程序，支持基本运算。",
          deadline: "2024-12-25 23:59",
          status: "已提交",
          type: "file",
          fullScore: 100,
          submittedAt: "2024-12-24 15:30",
          submittedFiles: ["calculator.py", "README.md"]
        },
        {
          id: "5",
          title: "操作系统实验",
          course: "操作系统原理",
          teacher: "刘教授",
          description: "实现进程调度算法，包括FCFS、SJF、RR等。",
          deadline: "2024-12-22 23:59",
          status: "已提交",
          type: "file",
          fullScore: 100,
          submittedAt: "2024-12-21 20:15",
          submittedFiles: ["scheduler.c", "实验报告.pdf"]
        }
      ];

      const mockGraded: Homework[] = [
        {
          id: "6",
          title: "软件工程需求分析",
          course: "软件工程",
          teacher: "赵教授",
          description: "完成一个在线购物系统的需求分析文档。",
          deadline: "2024-12-20 23:59",
          status: "已批改",
          type: "file",
          score: 92,
          fullScore: 100,
          submittedAt: "2024-12-19 16:45",
          gradedAt: "2024-12-23 10:30",
          feedback: "需求分析详细，用例图清晰，但缺少非功能性需求分析。建议补充性能、安全性等要求。",
          submittedFiles: ["需求分析文档.pdf", "用例图.vsd"]
        },
        {
          id: "7",
          title: "计算机组成原理实验",
          course: "计算机组成原理",
          teacher: "孙教授",
          description: "使用Logisim设计简单的CPU。",
          deadline: "2024-12-18 23:59",
          status: "已批改",
          type: "file",
          score: 88,
          fullScore: 100,
          submittedAt: "2024-12-17 14:20",
          gradedAt: "2024-12-20 09:15",
          feedback: "CPU设计基本正确，但缺少一些优化。建议改进指令执行效率，增加流水线设计。",
          submittedFiles: ["CPU.circ", "设计说明.pdf"]
        },
        {
          id: "8",
          title: "高等数学作业",
          course: "高等数学(一)",
          teacher: "周教授",
          description: "完成微积分相关习题，包括求导、积分等。",
          deadline: "2024-12-15 23:59",
          status: "已批改",
          type: "file",
          score: 85,
          fullScore: 100,
          submittedAt: "2024-12-14 18:30",
          gradedAt: "2024-12-16 14:20",
          feedback: "计算过程基本正确，但在某些复杂积分上存在错误。建议加强练习，提高计算准确性。",
          submittedFiles: ["数学作业.pdf"]
        },
        {
          id: "18",
          title: "数据库基础知识测试",
          course: "数据库系统原理",
          teacher: "李教授",
          description: "测试对数据库基本概念、SQL语句、范式理论等的掌握程度。",
          deadline: "2024-12-10 23:59",
          status: "已批改",
          type: "quiz",
          score: 78,
          fullScore: 100,
          submittedAt: "2024-12-10 14:30",
          gradedAt: "2024-12-12 16:45",
          feedback: "对基本概念掌握较好，但在复杂SQL查询和范式理解上还有提升空间。",
          questions: [
            {
              id: "1",
              question: "以下哪个不是关系数据库的特点？",
              type: "single",
              options: ["A. 数据以表格形式存储", "B. 支持事务处理", "C. 数据以树形结构存储", "D. 支持SQL查询"],
              correctAnswer: "C",
              studentAnswer: "C",
              isCorrect: true,
              score: 10,
              fullScore: 10,
              explanation: "关系数据库以表格形式存储数据，不是树形结构。树形结构是层次数据库的特点。"
            },
            {
              id: "2",
              question: "SQL中用于查询数据的关键字是？",
              type: "single",
              options: ["A. INSERT", "B. SELECT", "C. UPDATE", "D. DELETE"],
              correctAnswer: "B",
              studentAnswer: "B",
              isCorrect: true,
              score: 10,
              fullScore: 10,
              explanation: "SELECT是SQL中用于查询数据的关键字。"
            },
            {
              id: "3",
              question: "以下哪些是数据库的范式？",
              type: "multiple",
              options: ["A. 第一范式", "B. 第二范式", "C. 第三范式", "D. 第四范式"],
              correctAnswer: ["A", "B", "C", "D"],
              studentAnswer: ["A", "B", "C"],
              isCorrect: false,
              score: 7,
              fullScore: 10,
              explanation: "数据库范式包括第一范式、第二范式、第三范式、BCNF范式、第四范式等。"
            },
            {
              id: "4",
              question: "请简述什么是数据库事务的ACID特性？",
              type: "text",
              correctAnswer: "原子性、一致性、隔离性、持久性",
              studentAnswer: "原子性、一致性、隔离性、持久性",
              isCorrect: true,
              score: 20,
              fullScore: 20,
              explanation: "ACID是数据库事务的四个基本特性：原子性(Atomicity)、一致性(Consistency)、隔离性(Isolation)、持久性(Durability)。"
            }
          ],
          hasAIExplanation: true
        },
        {
          id: "19",
          title: "算法与数据结构测试",
          course: "数据结构与算法",
          teacher: "陈教授",
          description: "测试对基本算法和数据结构的理解，包括时间复杂度、空间复杂度等。",
          deadline: "2024-12-08 23:59",
          status: "已批改",
          type: "quiz",
          score: 85,
          fullScore: 100,
          submittedAt: "2024-12-08 16:20",
          gradedAt: "2024-12-10 11:30",
          feedback: "对基本算法掌握较好，但在复杂算法的时间复杂度分析上需要加强。",
          questions: [
            {
              id: "1",
              question: "快速排序的平均时间复杂度是？",
              type: "single",
              options: ["A. O(n)", "B. O(n log n)", "C. O(n²)", "D. O(log n)"],
              correctAnswer: "B",
              studentAnswer: "B",
              isCorrect: true,
              score: 15,
              fullScore: 15,
              explanation: "快速排序的平均时间复杂度是O(n log n)，最坏情况下是O(n²)。"
            },
            {
              id: "2",
              question: "以下哪种数据结构是LIFO？",
              type: "single",
              options: ["A. 队列", "B. 栈", "C. 链表", "D. 树"],
              correctAnswer: "B",
              studentAnswer: "B",
              isCorrect: true,
              score: 15,
              fullScore: 15,
              explanation: "栈(Stack)是LIFO(Last In First Out)的数据结构，后进先出。"
            },
            {
              id: "3",
              question: "以下哪些是图的遍历算法？",
              type: "multiple",
              options: ["A. 深度优先搜索", "B. 广度优先搜索", "C. 中序遍历", "D. 后序遍历"],
              correctAnswer: ["A", "B"],
              studentAnswer: ["A", "B"],
              isCorrect: true,
              score: 20,
              fullScore: 20,
              explanation: "深度优先搜索(DFS)和广度优先搜索(BFS)是图的遍历算法，中序遍历和后序遍历是树的遍历算法。"
            }
          ],
          hasAIExplanation: false
        }
      ];

      setPendingHomework(mockPending);
      setSubmittedHomework(mockSubmitted);
      setGradedHomework(mockGraded);

      console.log("✅ 获取作业列表成功:", {
        pending: mockPending.length,
        submitted: mockSubmitted.length,
        graded: mockGraded.length,
      });
    } catch (error) {
      console.error("❌ 获取作业列表失败:", error);
      message.error("获取作业列表失败");
      setPendingHomework([]);
      setSubmittedHomework([]);
      setGradedHomework([]);
    } finally {
      setLoading(false);
    }
  };

  // 提交作业
  const handleSubmitHomework = (homework: Homework) => {
    setSelectedHomework(homework);
    setSubmissionModalVisible(true);
  };

  // 查看作业详情
  const handleViewHomework = (homeworkId: string) => {
    setSelectedHomeworkId(homeworkId);
    setDetailModalVisible(true);
  };

  // 查看答案（直接显示AI解析）
  const handleViewAnswer = (homeworkId: string) => {
    setSelectedHomeworkId(homeworkId);
    setDetailModalVisible(true);
    // 标记为查看答案模式，自动显示AI解析
    setViewAnswerMode(true);
  };

  // 下载附件
  const handleDownloadAttachment = (filename: string) => {
    message.success(`开始下载: ${filename}`);
    // 这里可以添加实际的下载逻辑
  };

  // 关闭详情模态框
  const handleCloseDetailModal = () => {
    setDetailModalVisible(false);
    setSelectedHomeworkId("");
    setViewAnswerMode(false);
  };

  // 关闭提交模态框
  const handleCloseSubmissionModal = () => {
    setSubmissionModalVisible(false);
    setSelectedHomework(null);
  };

  // 提交选择题作业
  const handleSubmitQuiz = (homework: Homework) => {
    setSelectedHomework(homework);
    setQuizSubmissionModalVisible(true);
  };

  // 关闭选择题提交模态框
  const handleCloseQuizSubmissionModal = () => {
    setQuizSubmissionModalVisible(false);
    setSelectedHomework(null);
  };

  // 处理选择题作业提交
  const handleQuizSubmit = (homeworkId: string, answers: Record<string, string | string[]>) => {
    message.success('选择题作业提交成功！');
    setQuizSubmissionModalVisible(false);
    setSelectedHomework(null);
    // 这里可以添加实际的提交逻辑
  };



  // 初始化数据
  useEffect(() => {
    fetchHomework();
  }, []);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "未提交":
        return "orange";
      case "已提交":
        return "blue";
      case "已批改":
        return "success";
      case "已过期":
        return "error";
      default:
        return "default";
    }
  };

  const getDeadlineStatus = (deadline: string) => {
    const now = new Date();
    const deadlineDate = new Date(deadline);
    const diffHours = (deadlineDate.getTime() - now.getTime()) / (1000 * 60 * 60);
    
    if (diffHours < 0) {
      return { color: "red", text: "已过期" };
    } else if (diffHours < 24) {
      return { color: "orange", text: "即将截止" };
    } else if (diffHours < 72) {
      return { color: "yellow", text: "注意时间" };
    } else {
      return { color: "green", text: "时间充足" };
    }
  };

  const items = [
    {
      key: "pending",
      label: "待提交作业",
      children: (
        <List
          dataSource={pendingHomework}
          renderItem={(homework) => {
            const deadlineStatus = getDeadlineStatus(homework.deadline);
            return (
              <List.Item
                actions={[
                  homework.type === 'quiz' ? (
                    <Button 
                      type="primary" 
                      icon={<EditOutlined />}
                      onClick={() => handleSubmitQuiz(homework)}
                    >
                      开始答题
                    </Button>
                  ) : (
                    <Button 
                      type="primary" 
                      icon={<UploadOutlined />}
                      onClick={() => handleSubmitHomework(homework)}
                    >
                      提交作业
                    </Button>
                  ),
                  <Button onClick={() => handleViewHomework(homework.id)}>
                    查看详情
                  </Button>,
                ]}
              >
                <List.Item.Meta
                  title={
                    <Space>
                      {homework.title}
                      <Tag color={getStatusColor(homework.status)}>{homework.status}</Tag>
                      <Tag color={deadlineStatus.color}>{deadlineStatus.text}</Tag>
                    </Space>
                  }
                  description={
                    <Space direction="vertical" style={{ width: "100%" }}>
                      <div>
                        <Tag color="cyan">{homework.course}</Tag>
                        <Tag color="purple">{homework.teacher}</Tag>
                      </div>
                      <div style={{ color: "#666", fontSize: "14px" }}>
                        {homework.description}
                      </div>
                      <div>
                        <ClockCircleOutlined /> 截止时间：{homework.deadline}
                      </div>
                      <div>
                        <FileTextOutlined /> 满分：{homework.fullScore}分
                      </div>
                      {homework.attachments && homework.attachments.length > 0 && (
                        <div>
                          <FileTextOutlined /> 附件：
                          {homework.attachments.map((file, index) => (
                            <Button
                              key={index}
                              type="link"
                              size="small"
                              icon={<DownloadOutlined />}
                              onClick={() => handleDownloadAttachment(file)}
                            >
                              {file}
                            </Button>
                          ))}
                        </div>
                      )}
                    </Space>
                  }
                />
              </List.Item>
            );
          }}
        />
      ),
    },
    {
      key: "submitted",
      label: "已提交作业",
      children: (
        <List
          dataSource={submittedHomework}
          renderItem={(homework) => (
            <List.Item actions={[
              <Button onClick={() => handleViewHomework(homework.id)}>查看详情</Button>,
              <Button 
                type="primary" 
                icon={<EyeOutlined />}
                onClick={() => handleViewAnswer(homework.id)}
              >
                查看答案
              </Button>
            ]}>
              <List.Item.Meta
                title={
                  <Space>
                    {homework.title}
                    <Tag color={getStatusColor(homework.status)}>
                      <CheckCircleOutlined /> 已提交
                    </Tag>
                  </Space>
                }
                description={
                  <Space direction="vertical">
                    <div>
                      <Tag color="cyan">{homework.course}</Tag>
                      <Tag color="purple">{homework.teacher}</Tag>
                    </div>
                    <div>
                      <ClockCircleOutlined /> 截止时间：{homework.deadline}
                    </div>
                    <div>
                      <FileTextOutlined /> 提交时间：{homework.submittedAt}
                    </div>
                    <div>
                      <FileTextOutlined /> 已提交文件：
                      {homework.submittedFiles?.map((file, index) => (
                        <Tag key={index} color="blue">{file}</Tag>
                      ))}
                    </div>
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      ),
    },
    {
      key: "graded",
      label: "已批改作业",
      children: (
        <List
          dataSource={gradedHomework}
          renderItem={(homework) => (
            <List.Item actions={[
              <Button onClick={() => handleViewHomework(homework.id)}>查看详情</Button>,
              <Button 
                type="primary" 
                icon={<EyeOutlined />}
                onClick={() => handleViewAnswer(homework.id)}
              >
                查看答案
              </Button>
            ]}>
              <List.Item.Meta
                title={
                  <Space>
                    {homework.title}
                    <Tag color={getStatusColor(homework.status)}>
                      <CheckCircleOutlined /> 已批改
                    </Tag>
                    <Tag color="success">得分：{homework.score}/{homework.fullScore}</Tag>
                  </Space>
                }
                description={
                  <Space direction="vertical">
                    <div>
                      <Tag color="cyan">{homework.course}</Tag>
                      <Tag color="purple">{homework.teacher}</Tag>
                    </div>
                    <div>
                      <ClockCircleOutlined /> 截止时间：{homework.deadline}
                    </div>
                    <div>
                      <FileTextOutlined /> 提交时间：{homework.submittedAt}
                    </div>
                    <div>
                      <FileTextOutlined /> 批改时间：{homework.gradedAt}
                    </div>
                    {homework.feedback && (
                      <div>
                        <ExclamationCircleOutlined /> 教师反馈：{homework.feedback}
                      </div>
                    )}
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      ),
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <StyledCard title="作业中心">
        <Tabs items={items} />
      </StyledCard>
      
      {/* 作业详情模态框 */}
      <HomeworkDetailModal
        visible={detailModalVisible}
        homeworkId={selectedHomeworkId}
        onClose={handleCloseDetailModal}
        viewAnswerMode={viewAnswerMode}
      />

      {/* 作业提交模态框 */}
      <HomeworkSubmissionModal
        visible={submissionModalVisible}
        homework={selectedHomework}
        onClose={handleCloseSubmissionModal}
        onSuccess={() => {
          handleCloseSubmissionModal();
          fetchHomework(); // 刷新数据
        }}
      />

      {/* 选择题作业答题模态框 */}
      <QuizSubmissionModal
        visible={quizSubmissionModalVisible}
        homework={selectedHomework}
        onCancel={handleCloseQuizSubmissionModal}
        onSubmit={handleQuizSubmit}
      />
    </div>
  );
};

export default StudentHomework; 